import React from 'react';
import { Layout, Menu, Image } from 'antd';
const { SubMenu } = Menu;
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import './index.less';
import { connect, Link } from 'umi';

const logoImg = require('@/images/logo.png');

const { Header, Sider, Content, Footer } = Layout;

@connect(({ global }) => ({ global }))
export default class AdminLayout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: true,
      userMenuList: [],
    };
  }

  componentWillMount() {
    console.log(this.props.global.userMenuList, 'ddddddddddd');
    this.buildMenusItem();
    // 从缓存中取出菜单
    // const userMenuList = JSON.parse(localStorage.getItem('userMenuList')) || []
    // console.log(userMenuList,'userMenuList');
    // this.setState({userMenuList});
  }

  buildMenusItem = () => {
    let reslut = [];
    try {
      let res = this.props.global.userMenuList || [];
      res = res.filter((item) => item.menuStatus != -1);
      let firstMenuData = res.filter((item) => item.menuParentId == -1);
      reslut = firstMenuData.map((itemIn) => {
        return {
          ...itemIn,
          children: res.filter((item) => item.menuParentId == itemIn.id),
        };
      });
    } catch (error) {}
    this.setState({
      userMenuList: reslut,
    });
  };

  /**
   * 切换展示/收缩
   */
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  /**
   * 渲染头部header
   */
  initHeaderElement = () => {
    const { collapsed } = this.state;
    return (
      <Header style={{ padding: 0, background: '#fff' }}>
        <span className="admin-trigger" onClick={this.toggle}>
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </span>
      </Header>
    );
  };

  /**
   * 渲染底部footer
   */
  initFooterElement = () => {
    return <Footer style={{ textAlign: 'center' }}>蜀ICP备2020028876号</Footer>;
  };

  render() {
    const { collapsed, userMenuList = [] } = this.state;
    console.log(userMenuList, '22222');
    return (
      <Layout>
        <Sider
          trigger={null}
          collapsible
          collapsed={collapsed}
          style={{ overflow: 'auto', height: '100vh' }}
        >
          <div className="admin-logo">
            {/* EASY-CMS */}
            {/* <Image width={200} src={logoImg} /> */}
          </div>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            {userMenuList.map(({ id, menuName, menuPath, children }) => {
              return (
                <SubMenu key={id} title={menuName}>
                  {children.map(({ id, menuName, menuPath }) => {
                    return (
                      <Menu.Item key={id}>
                        <Link to={`/administrators/admin${menuPath}`}>
                          {menuName}
                        </Link>
                      </Menu.Item>
                    );
                  })}
                </SubMenu>
              );
            })}
          </Menu>
        </Sider>
        <Layout className="admin-site-layout">
          {this.initHeaderElement()}
          <Content className="admin-layout-content">
            {/*局部路由切换实现*/}
            {this.props.children}
            {/*局部路由切换实现*/}
          </Content>
          {this.initFooterElement()}
        </Layout>
      </Layout>
    );
  }
}
